<!--
 * @Autor: 王琛
 * @Description: 菜单
 * @Copyright: 版权归个人所有
-->
<style lang="stylus" scoped>
#Menu {

  width: 100%;
  height: 100%;
  position: relative;
  padding: 5px;
  box-sizing: border-box;
  display: grid;
  grid-template-rows:100%;
  grid-template-columns:100%;
  grid-gap: 5px;

  .MenuItemBox {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    display: grid;
    grid-template-rows:100%;
    grid-template-columns: 100%;

    .MenuItem {
      --NameHeight: 12px;
      width: 100%;
      height: 100%;
      position: relative;
      display: grid;
      grid-template-rows:calc(100% - var(--NameHeight) - 5px)  var(--NameHeight);
      grid-template-columns: 100%;
      align-items: center;
      justify-items: center;

      & > i {
        font-size: 15px;
        margin: 0 auto;
        color: #ffffff;
        transition: color .5s

      }

      & > span {
        font-size: var(--NameHeight);
        text-align: center;
        color: #ffffff
        transition: color .5s
      }

      & > *.Activation {
        color: var(--ActivationColor);
      }


    }
  }


  .DotBox {
    width: 100%;
    height: var(--DotBoxHeight);
    position: absolute;
    left: 0%;
    top: calc((var(--DotBoxHeight) + var(--DotBoxMarginBottomMenu)) * -1);
    display: flex;
    justify-content: center;
    align-items: center;

    & > div {
      width: var(--DotBoxHeight);
      height: var(--DotBoxHeight);
      border-radius: 50%;
      background: #ffffff;
      margin: 0px 2px;
      transition: background .8s;
    }

    & > div.Activation {
      background: var(--ActivationColor);
    }
  }
}
</style>


<template>
  <div id="Menu">
    <!-- 小圆点 -->
    <div class="DotBox">
      <div v-for="(item, index) in _props.MenuList" :class="{ Activation:_data.CurSelectMenuItem?.Name === item.Name }"></div>
    </div>
    <div class="MenuItemBox" :style="{'gridTemplateColumns':`repeat(${_props.MenuList.length}, ${_props.MenuItemSize}px)`}">
      <!-- 菜单列表 -->
      <div v-for="(item, index) in _props.MenuList" :key="index" class="MenuItem" @click="ClickMenuMain(item)">
        <i :class="{'iconfont':true,[item.Icon]:true,Activation:_data.CurSelectMenuItem?.Name === item.Name}"></i>
        <span :class="{Activation:_data.CurSelectMenuItem?.Name === item.Name}">{{ item.Name }}</span>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts" name="Menu">

import {onMounted, reactive, watch} from "vue";
import {useMainStore} from "src/pinia";
import {useRoute} from "vue-router";

const _route = useRoute();
const _state = useMainStore();
const _props = defineProps({
  MenuList: {
    type: Array,
    default: () => []
  },
  MenuItemSize: {
    type: Number,
    default: 60
  }
})

onMounted(() => {
  ClickMenuMain(_props.MenuList[0])
  console.log('%c日志-163013', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', _route);
})

watch(() => _route.query, (newVal) => {
  try {
    if (!newVal) throw new Error('路由参数为空');

    const {PageName} = newVal;

    const CurSelectMenuItem = _props.MenuList.find(item => item.Name === PageName);

    console.log('%c日志-163246', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', CurSelectMenuItem);

    if (!CurSelectMenuItem) throw new Error('没有找到当前选中的菜单项');

    _data.CurSelectMenuItem = CurSelectMenuItem;

  } catch (e) {
    console.error('%c捕获报错-16:34:44', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', e.message);
  }

}, {deep: true, immediate: true})

const _data = reactive({
  CurSelectMenuItem: {}
})


/**
 * @description: 点击了主要菜单按钮
 * @author: 王琛
 * @Date: 2025-04-25 21:04:31
 * @param {*}
 * @return {*}
 */
function ClickMenuMain(MenuItem) {
  try {

    console.log('%c日志-210749', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', MenuItem);

    if (!MenuItem || MenuItem.Name == _data.CurSelectMenuItem) return;

    _data.CurSelectMenuItem = MenuItem;

    if (MenuItem?.Router?.path) _state.router.replace(MenuItem?.Router)
  } catch (e) {
    console.error('%c捕获报错-21:04:31', 'color:#fff;fontSize:15px;background:#993366;padding:2px 5px;border-radius:6px', e.message);
  }

}

</script>